<template>
	
	<view class="contont cent" style="background-color: #F5F5F5;flex-direction: column;">
		<view  v-if="shoed==0" style="width: 355px;height: 120px;margin-top: 10px;margin-bottom: 10px;">
			<image src="../../static/img/bg_dk@2x.png" style="width: 355px;height: 120px;" mode="" @click="jia"></image>
			<view class="cent" style="margin-top: 20px;height: 18px;position: absolute;top: 0px;" >
				<text style="font-size: 18px;font-weight: 500;color: #042A58;margin-left: 20px;" @click="jia">{{list.bankAccountNumber}}</text>
				<text style="font-size: 15px;color: #97A9BF;margin-left: 213px;" @click="none">删除</text>
			</view>
			<view style="margin-top: 10px; font-size: 14px;color: #627995;margin-bottom: 20px;height: 14px;position: absolute;top: 41px;" @click="jia">
				<text style="margin-left: 20px;">{{list.bankUserName}}</text>
				<text style="margin-left: 20px;">个人储蓄卡</text>
			</view>
			<text style="color: #627995;font-size: 18px;margin-left: 20px;height: 18px;position: absolute;top: 90px;left: 8px;" @click="jia">{{list.card_no}}</text>
		</view>		
		 
		 <view v-if="shoed==1" style="display: flex;flex-direction: column;align-items: center;">
		 	<image src="../../static/img/pic_wuka@2x.png" mode="" style="width: 240px;height: 150px;margin-top: 10px;"></image>
			<text style="font-size: 18px;color: #000000;margin-top: 20px;">暂无银行卡</text>
			<text style="font-size: 15px;color: #777777;margin-top: 10px;">您还未添加银行卡，请您添加银行卡！</text>
		 </view>
		<button v-if="shoed==0">添加银行卡</button>
		<button class="but" v-if="shoed==1" @click="jia">+添加银行卡</button>
	</view>
</template>

<script>
	import {ajax} from '../../api.js'
	export default {
		data() {
			return {
				shoed:0,
				list:[]
			}
		},
		onShow() {
			var that=this
			ajax({
				url:"/v1/appdriver/bankCard/detail",
				method:"post",
				success(res){
					that.list=res.data.message
					if(res.data.message.bankUserName==""||res.data.message.bankUserName==null){
						that.shoed=1
					}else{
						that.shoed=0
					}
				}
			})
		},
		methods: {
			none(){
				var that=this
				ajax({
					url:"/v1/appdriver/bind/bankCard",
					method:"post",
					data:{
						card_no:"",
						bankAccountNumber:"",
						bankUserName:""
					},
					success(res){
						if(res.data.status=="OK"){
						ajax({
							url:"/v1/appdriver/bankCard/detail",
							method:"post",
							success(res){
								that.list=res.data.message
								if(res.data.message.bankUserName==""||res.data.message.bankUserName==null){
									that.shoed=1
								}else{
									that.shoed=0
								}
							}
						})
						}
					}
				})
			},
			jia(){
				uni.navigateTo({
					url:"./cards?id=1"
				})
			}
		}
	}
</script>

<style>

	button{
		width:355px;
		height:44px;
		background:rgba(218,224,231,1);
		border-radius:8px;
		color: #FFFFFF;
		margin-top: 300px;
	}
	.but{
	width:355px;
	height:44px;
	background:#042A58;
	border-radius:8px;
	color: #FFFFFF;
	margin-top: 300px;	
	}
</style>
